/**
 * @author 木人心
 * @version 1.1.0
 */
@use "util" as *;

// region TODO fw-字宽(粗细)
@each $key, $value in range-number(1, 7, 1, 100) {
  .fw-#{$key} {
    font-weight: $value !important;
  }
}

// endregion

// region TODO fs-字体大小
@each $value in range-number(12, 48, 2) {
  .fs-#{$value} {
    font-size: $value + px !important;
  }
}

// endregion

// region TODO flex-$value
@each $value in range-number(1, 4) {
  .flex-#{$value} {
    flex: $value;
  }
}

// endregion

// region TODO h-高 & w-宽
@each $value in range-number(0, 100, 5) {
  .w-#{$value} {
    width: $value * 1%;
  }
  .h-#{$value} {
    height: $value * 1%;
  }
}

// endregion

// region TODO 生成内外边距
// 内外边距 - rem - 继承原bootstrap
$index: 0;
@each $value in (0, 0.25, 0.5, 1, 1.5, 3) {
  @include mixin-margin($index, $value, rem, (m: margin, p: padding));
  $index: $index + 1;
}

// 内外边距 - px
@each $value in range-number(8, 48, 4) {
  @include mixin-margin($value, $value, px, (m: margin, p: padding));
}

// 外边距 - auto
@include mixin-margin(auto, auto, null, (m: margin));
// endregion

// region TODO 按类名和属性生成
// prefix： 前缀（类名）；name：属性名；values：每个属性值；
// 一般情况下类名后缀和值一致。
// .prefix-value: { name: value }
// 当类名后缀和值不同时，如：align-content-start: { align-content: flex-start }，value可写成数组，第一位为类名前缀，第二位为值。*下标从1开始
// .prefix-value[1]: { name: value[2] }
// *此版本删除了不常用的一些属性
$collection: (
        // 弹性布局相关
        ('prefix': d, 'name': display, 'values': (none, block, inline, flex, grid, inline-block, inline-flex)),
        ('prefix': justify-content, 'name': justify-content, 'values': ((start, flex-start), (end, flex-end), (between, space-between), (around, space-around), center, initial)),
        ('prefix': align-content, 'name': align-content, 'values': (stretch, center, (start, flex-start), (end, flex-end), (between, space-between), (around, space-around), initial, inherit)),
        ('prefix': justify-items, 'name': justify-items, 'values': (center, start, end, (start, flex-start), (end, flex-end), self-start, self-end, left, right)),
        ('prefix': align-items, 'name': align-items, 'values': (stretch, center, (start, flex-start), (end, flex-end), baseline, initial)),
        ('prefix': flex, 'name': flex-direction, 'values': (row, row-reverse, column, column-reverse)),
        ('prefix': flex, 'name': flex-wrap, 'values': (nowrap, wrap, wrap-reverse)),
        // 定位
        ('prefix': position, 'name': position, 'values': (absolute, fixed, relative, static, sticky, inherit)),
        // 文本对齐
        ('prefix': text, 'name': text-align, 'values': (left, right, center, justify, inherit)),
        ('prefix': vertical-align, 'name': vertical-align, 'values': (baseline, sub, super, top, text-top, middle, bottom, text-bottom, inherit)),
        // 浮动
        ('prefix': float, 'name': float, 'values': (left, right, none, inherit)),
        // 宽高
        ('prefix': w, 'name': width, 'values': (auto, (fit, fit-content), inherit)),
        ('prefix': h, 'name': height, 'values': (auto, (fit, fit-content), inherit)),
        // 鼠标光标
        ('prefix': cursor, 'name': cursor, 'values': (default, auto, crosshair, pointer, move, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize, text, wait, help)),
        // 内容溢出
        ('prefix': overflow, 'name': overflow, 'values': (visible, hidden, scroll, auto, inherit)),
);
@each $item in $collection {
  @each $value in map-get($item, values) {
    $name: null;
    @if length($value) == 2 {
      $name: nth($value, 1);
      $value: nth($value, 2);
    } @else {
      $name: $value;
    }
    .#{map-get($item, prefix)}-#{$name} {
      #{map-get($item, name)}: $value;
    }
  }
}

// endregion

// region TODO 调试框
$debugger-bor-i: 1;
@while $debugger-bor-i * 50 < 360 {
  .debugger-bor-#{$debugger-bor-i} {
    outline: 2px dashed hsl($debugger-bor-i * 50, 100%, 50%);
    box-shadow: inset 0 0 12px 2px hsla($debugger-bor-i * 50, 100%, 50%, 70%);
  }
  $debugger-bor-i: $debugger-bor-i + 1
}
.debugger-bor {
  @extend .debugger-bor-7;
}

// endregion

// region TODO 超出省略
// 超出显示省略号
.overflow-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}
@each $value in range-number(2, 4, 1) {
  .overflow-line-clamp-#{$value} {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: #{$value};
    -webkit-box-orient: vertical;
  }
}
// endregion

// region TODO 补充


// 宽高补充
.wh-100 {
  @extend .w-100;
  @extend .h-100;
}

// 盒子布局补充
.d-flex-center {
  @extend .d-flex;
  @extend .justify-content-center;
  @extend .align-items-center;
}

.d-flex-align-center {
  @extend .d-flex;
  @extend .align-items-center;
}

.d-flex-between {
  @extend .d-flex;
  @extend .justify-content-between;
}

.d-flex-between-center {
  @extend .d-flex;
  @extend .justify-content-between;
  @extend .align-items-center;
}

.d-flex-around-center {
  @extend .d-flex;
  @extend .justify-content-around;
  @extend .align-items-center;
}

// endregion
